<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                msg:"hello Vue"
            },
            beforeCreate:function(){
                console.log('beforCreat called')
                //在这里数据还没注入实例，所以访问不到数据
                console.log(this.msg)//undefinded
            },
            created(){
                console.log('create called')
                //数据已经注入到实例，可以访问数据
                console.log(this.msg)//"hello Vue"
                //el选项还未注入到实例，
                console.log(this.el)//undefinded
            },
            beforeMount(){
                console.log('beforeMount called')
                //找到元素，并将template编译到渲染函数中，但并未将数据渲染到模板中
                console.log(this.$el)
            },
            mounted(){
                console.log('mounted called')
                //渲染完成
                console.log(this.$el)
            }

        })
    </script>
</body>
</html>